<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%
	String bathPath = request.getContextPath();
	pageContext.setAttribute("bathPath", bathPath);
%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
  <meta charset="utf-8">
  <title>管理员管理</title>
  <meta name="renderer" content="webkit">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
  <script type="text/javascript" src="${bathPath}/js/jquery-1.9.1.min.js" ></script>
  <link rel="stylesheet" href="${bathPath}/frame/layui/css/layui.css"  media="all">
  <!-- 注意：如果你直接复制所有代码到本地，上述css路径需要改成你本地的 -->
</head>

<style type="text/css"> 
.layui-table-cell .layui-form-checkbox[lay-skin="primary"]{
     top: 50%;
     transform: translateY(-50%);
}
</style>
<body>
<div class="layui-tab" lay-filter="demo" lay-allowclose="true" style="height:435px; width:630px;margin-left:20px;margin-top:-5px ">
   <!-- <ul class="layui-tab-title">
    <li lay-id="22">管理员信息查询</li>
  </ul>  -->
  <div class="layui-tab-content" style="height:435px; width:630px;">
    <div class="layui-tab-item layui-show" >
  <form id="myform" class="layui-form layui-form-pane">
  <input type="hidden" id="id" name="id" value="${u.id}" />
 <div class="demoTable" style="margin-top: 20px;margin-left:25px;"> 
</div> 
</form>   
 <table class="layui-hide"  id="demo"></table>
<table class="layui-hide"  id="test1"  lay-filter="test1"></table>
<script src="${bathPath}/frame/layui/layui.js" charset="utf-8"></script>
<!-- 注意：如果你直接复制所有代码到本地，上述js路径需要改成你本地的 --> 
<script type="text/html" id="barDemo">
  <div class="layui-btn-container">
	<button class="layui-btn layui-btn-xs" lay-event="del" >删除</button>
  </div>
</script>
<script type="text/html" id="toolbarDemo">
  <div class="layui-btn-container">
    <a class="layui-btn layui-btn-sm" onclick="addtab()" >增加</a>
  </div>
</script>

<script>
var userid;
	layui.use('element', function() {
		var $ = layui.jquery, element = layui.element; //Tab的切换功能，切换事件监听等，需要依赖element模块
		$('.site-demo-active').on('click', function() {
			var othis = $(this), type = othis.data('type');
			active[type] ? active[type].call(this, othis) : '';
		});

		//Hash地址的定位
		var layid = location.hash.replace(/^#test=/, '');
		element.tabChange('test', layid);

		element.on('tab(test)', function(elem) {
			location.hash = 'test=' + $(this).attr('lay-id');
		});

	});
	 //删除方法
	function del(d){
		alert(d);
		layer.confirm("确定删除么？", {btn: ['确定', '取消'], title: "提示"}, function(){
			$.ajax({
			 type:"POST",
			 async:true,
			 url:"${bathPath}/aDKManageRole/deleteUserRole.action",
			 data:"userId="+d+"&roleId="+$("#id").val(),
		     success:function(msg){
		         layer.msg(msg);
		         location.reload();
		         
		     }
		 });
		});
	} 
	//增加
	function addtab(){
		top.layer.open({
			  title:'选择用户',
			  type: 2,
			  area:['450px', '525px'],
			  offset: ['40px','500px'] ,
			  content: '${bathPath}/aDKManageRole/index2.action?id='+$("#id").val()
			}); 
	}
	</script>

<script>

//表格事件
layui.use('table', function(){
 //var parm = $('#myform').serialize(); //获取表单所有数据
  var table = layui.table;
  var layTableId="test1";
  var flag=0; //判断表格是否在增加数据
  var roleNodeChecked = null;
//返回data数据给表格
var laydata=" ";
//监听行工具栏事件
table.on('tool(test1)', function(obj){
	var data = obj.data //获得当前行数据
    ,layEvent = obj.event; //获得 lay-event 对应的值
  if(layEvent === 'del'){
	  del(data.uid);
    } 
});
//监听排序
  table.on('sort(test1)', function(obj){ //注：tool是工具条事件名，test是table原始容器的属性 lay-filter="对应的值"
  if(obj.field!=null){
	  parm="sort="+obj.field
	  if(obj.type!=null){
		  parm+="&order="+obj.type;
	  }
  }
  table.reload('test1', {
    initSort: obj //记录初始排序，如果不设的话，将无法标记表头的排序状态。 layui 2.1.1 新增参数
    ,data:getdata(parm)
  });
}); 
//文本框搜索
		  $('.demoTable .layui-btn').on('click', function(){
		    selectall();
		  });
		
  //渲染表格
		  table.render({
			    elem: '#test1'
			    ,id: layTableId
			   ,url:'${bathPath}/aDKManageRole/select.action?id='+$("#id").val()
			    ,toolbar: '#toolbarDemo' 
			    ,cellMinWidth: 80 //全局定义常规单元格的最小宽度，layui 2.2.1 新增
			    ,width:600
			    ,size:'sm'
			    ,cols: [[
					{type: 'numbers',title:'序号', fixed: 'left',align:'center',width:'5%'}
			      	,{field: 'realName',title:'姓名', fixed: 'left',align:'center',width:'20%'}
			      	,{field: 'userName',title:'账号', fixed: 'left',align:'center',width:'20%'}
			       	,{field: 'depName',title:'部门', fixed: 'left',align:'center',width:'15%'	}
			      	,{field: 'gender',title:'性别', fixed: 'left',align:'center',width:'10%',
			      		templet: function(row){
			      			var ss="";
							if(row.gender==0){
								ss="男";
							}
							if(row.gender==1){
								ss="女";
							}
							return ss}}
			      	,{field: 'name',title:'角色', fixed: 'left',align:'center',width:'15%'} 
			      	,{field: '',title:'操作', fixed: 'left',align:'center',width:'15%',toolbar: '#barDemo'}
			    ]]
			    ,page: true //开启分页
			    ,limit:10  //默认十条数据一页
		        ,limits:[10,20,30,40,100]  //数据分页条
			  }); 
		});
</script>
    </div>
  </div>
</div>
</body>
</html>